import { View, Button, Text, Image } from '@tarojs/components';
import Taro from '@tarojs/taro';
import React, { Component } from 'react';
import * as T from '../types';
import './Project.less';
import actions from '../actions/index';
import { connect } from 'react-redux';
import { store2Props } from '../selectors';

type IProjectProps = T.IProps & T.IProjectProps;
//@ts-ignore
@connect<Partial<IProjectProps>, T.IProjectState>(store2Props, actions)
export default class Info extends Component<Partial<IProjectProps>, T.IProjectState> {
  constructor(props: IProjectProps) {
    super(props);
    this.state = {};
  }

  renderToolsBox() {
    let tabList = [
      {
        name: '房屋维修',
        iconUrl: "http://img.daoway.cn/img/tags/jiazhuangweiuxiu.png",
        url: 'https://www.daoway.cn/h5/search_service.html?filter=36&title=%E4%B8%8A%E9%97%A8%E7%BB%B4%E4%BF%AE&tag=%E6%88%BF%E5%B1%8B%E7%BB%B4%E4%BF%AE&channel=rykj'
      },
      {
        name: '家电维修',
        iconUrl: "https://img.daoway.cn/img/tags/jiadianweixiu.png",
        url: 'https://www.daoway.cn/h5/search_service.html?filter=36&title=%E4%B8%8A%E9%97%A8%E7%BB%B4%E4%BF%AE&tag=%E5%AE%B6%E7%94%B5%E7%BB%B4%E4%BF%AE&channel=rykj'
      },
      {
        name: '电脑维修',
        iconUrl: "https://img.daoway.cn/img/tags/diannaoweixiu.png",
        url: 'https://www.daoway.cn/h5/search_service.html?filter=36&title=%E4%B8%8A%E9%97%A8%E7%BB%B4%E4%BF%AE&tag=%E7%94%B5%E8%84%91%E7%BB%B4%E4%BF%AE&channel=rykj'
      },
      {
        name: '管道疏通',
        iconUrl: "https://img.daoway.cn/img/tags/guandaoshutong.png",
        url: 'https://www.daoway.cn/h5/search_service.html?filter=36&title=%E4%B8%8A%E9%97%A8%E7%BB%B4%E4%BF%AE&tag=%E7%AE%A1%E9%81%93%E7%96%8F%E9%80%9A&channel=rykj'
      },
      {
        name: '开锁换锁',
        iconUrl: "https://img.daoway.cn/img/tags/kaisuohuansuo.png",
        url: 'https://www.daoway.cn/h5/search_service.html?filter=36&title=%E4%B8%8A%E9%97%A8%E7%BB%B4%E4%BF%AE&tag=%E5%BC%80%E9%94%81%E6%8D%A2%E9%94%81&channel=rykj'
      },
    ]
    let ViewItem = [];
    tabList.map((item, index) => {
      ViewItem.push(
        <View className='tabs'
          style={{ borderRight: tabList.length != index ? '1px solid #eee' : 'none' }}
          onClick={() => {
            Taro.setStorageSync('url', item.url)
            Taro.navigateTo({
              url: '/pages/package-A/webview/index'
            })
          }}>
          <Image className='img' src={item.iconUrl} />
          <Text className='title'>
            {item.name}
          </Text>
        </View>
      )
    });
    return ViewItem;
  }

  render() {
    let {
      main,
      actions: { action },
    } = this.props;
    return (
      <View className="PageProject">
        <View className='titleBox'>
          <Text className='t_left'>即刻达</Text>
          <Text className='t_right'>最快30分钟上门</Text>
        </View>
        <View className="toolsBox">
          {this.renderToolsBox()}
        </View>
      </View>
    );
  }
}

//create by moon https://github.com/creasy2010/moon
